<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    svg {
        width: 100%;
    }
</style>

<body>
    <embed src="pic.svg" />
    <svg>
        <rect width="300" height="100" stroke="black" stroke-width="2" fill="red" fill-opacity="0.1" stroke-opacity="0.1" />
    </svg>
    <svg>
        <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
        <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
        <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
    </svg>
    <svg>
        <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
        <ellipse cx="0" cy="50" rx="190" ry="20" style="fill:white" />
    </svg>
    <svg>
        <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
    </svg>
    <svg>
        <polygon points="200,10 250,30 160,50" style="fill:lime;stroke:purple;stroke-width:1" />
    </svg>
    <svg>
        <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
    </svg>
    <svg width="12cm" height="4cm" viewBox="0 0 1200 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <desc>Example fillrule-nonzero - demonstrates fill-rule:nonzero</desc>

        <rect x="1" y="1" width="1198" height="398" fill="none" stroke="red" />
        <defs>
            <path id="Triangle" d="M 16,0 L -8,9 v-18 z" fill="black" stroke="none" />
        </defs>
        <g fill-rule="nonzero" fill="red" stroke="black" stroke-width="3">
            <path d="M 250,75 L 323,301 131,161 369,161 177,301 z" />
            <use xlink:href="#Triangle" transform="translate(306.21 249) rotate(72)" overflow="visible" />
            <use xlink:href="#Triangle" transform="translate(175.16,193.2) rotate(216)" overflow="visible" />
            <use xlink:href="#Triangle" transform="translate(314.26,161) rotate(0)" overflow="visible" />
            <use xlink:href="#Triangle" transform="translate(221.16,268.8) rotate(144)" overflow="visible" />
            <use xlink:href="#Triangle" transform="translate(233.21,126.98) rotate(288)" overflow="visible" />
            <path d="M 600,81 A 107,107 0 0,1 600,295 A 107,107 0 0,1 600,81 z
             M 600,139 A 49,49 0 0,1 600,237 A 49,49 0 0,1 600,139 z" />
            <use xlink:href="#Triangle" transform="translate(600,188) rotate(0) translate(107,0) rotate(90)" overflow="visible" />
            <use xlink:href="#Triangle" transform="translate(600,188) rotate(120) translate(107,0) rotate(90)" overflow="visible" />
            <use xlink:href="#Triangle" transform="translate(600,188) rotate(240) translate(107,0) rotate(90)" overflow="visible" />
            <use xlink:href="#Triangle" transform="translate(600,188) rotate(60) translate(49,0) rotate(90)" overflow="visible" />
            <use xlink:href="#Triangle" transform="translate(600,188) rotate(180) translate(49,0) rotate(90)" overflow="visible" />
            <use xlink:href="#Triangle" transform="translate(600,188) rotate(300) translate(49,0) rotate(90)" overflow="visible" />
            <path d="M 950,81 A 107,107 0 0,1 950,295 A 107,107 0 0,1 950,81 z
             M 950,139 A 49,49 0 0,0 950,237 A 49,49 0 0,0 950,139 z" />
            <use xlink:href="#Triangle" transform="translate(950,188) rotate(0) translate(107,0) rotate(90)" overflow="visible" />
            <use xlink:href="#Triangle" transform="translate(950,188) rotate(120) translate(107,0) rotate(90)" overflow="visible" />
            <use xlink:href="#Triangle" transform="translate(950,188) rotate(240) translate(107,0) rotate(90)" overflow="visible" />
            <use xlink:href="#Triangle" transform="translate(950,188) rotate(60) translate(49,0) rotate(-90)" overflow="visible" />
            <use xlink:href="#Triangle" transform="translate(950,188) rotate(180) translate(49,0) rotate(-90)" overflow="visible" />
            <use xlink:href="#Triangle" transform="translate(950,188) rotate(300) translate(49,0) rotate(-90)" overflow="visible" />
        </g>
    </svg>
    <svg>
        <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
        </defs>
        <text x="10" y="100" style="fill:red;">
            <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
        </text>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g fill="none" stroke="black" stroke-width="6">
            <path stroke-linecap="butt" d="M5 20 l215 0" />
            <path stroke-linecap="round" d="M5 40 l215 0" />
            <path stroke-linecap="square" d="M5 60 l215 0" />
        </g>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g fill="none" stroke="black" stroke-width="4">
            <path stroke-dasharray="5,5" d="M5 20 l215 0" />
            <path stroke-dasharray="10,10" d="M5 40 l215 0" />
            <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
        </g>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="f1" x="0" y="0">
                <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
            </filter>
        </defs>
        <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="f1" x="0" y="0" width="200%" height="200%">
                <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
                <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
            </filter>
        </defs>
        <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
          <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color:rgb(255,255,255);
            stop-opacity:0" />
            <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
          </radialGradient>
        </defs>
        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
      </svg>
</body>
<script src="main.js"></script>

</html>